<template>
  <div>
    <el-form :model="formData" label-position="right" label-width="220px">
      <el-form-item label="项目名称:">
        <div>{{formData.proName}}</div>

      </el-form-item>
      <el-divider content-position="left">主体信息</el-divider>

      <el-form-item label="单位名称:">
        {{ formData.users.cName }}
      </el-form-item>
      <el-form-item label="用户级别:">
        {{ formData.users.user_level.name }}
      </el-form-item>
      <el-form-item label="单位性质:">
        {{ formData.users.cType }}
      </el-form-item>
      <el-form-item label="所在地区:">
        {{ formData.users.cArea }}
      </el-form-item>
      <el-form-item label="联系电话:">
        {{ formData.users.cPhone }}
      </el-form-item>
      <el-form-item label="被授权人姓名：">
        {{ formData.users.clientName }}
      </el-form-item>
      <el-form-item label="手机号：">
        {{ formData.users.clientPhone }}
      </el-form-item>
      <el-divider content-position="left">项目基础信息</el-divider>
      <el-form-item label="施工单位:">
        <el-input v-model="formData.conUnit" clearable placeholder="请输入" />
      </el-form-item>
      <el-form-item label="项目名称:">
        <el-input v-model="formData.proName" readonly clearable placeholder="请输入" />
      </el-form-item>
      <el-form-item label="项目地点:">
        <el-input v-model="formData.proAddress" clearable placeholder="请输入" />
      </el-form-item>
      <el-form-item label="发包单位:">
        <el-input v-model="formData.outUnit" clearable placeholder="请输入" />
      </el-form-item>
      <el-form-item label="项目工期:">
        <el-input v-model="formData.proTime" clearable placeholder="请输入" />
      </el-form-item>
      <el-form-item label="项目总金额（元）:">
        <el-input-number v-model="formData.allPrice" :precision="2" clearable />
      </el-form-item>
      <el-divider content-position="left">项目唯一结算信息</el-divider>
      <el-form-item label="项目结算账户名:">
        <el-input v-model="formData.bankName" clearable placeholder="请输入" />
      </el-form-item>
      <el-form-item label="项目结算账号:">
        <el-input v-model="formData.bankNumber" clearable placeholder="请输入" />
      </el-form-item>

      <el-form-item label="开户行:">
        <el-input v-model="formData.bankAddress" clearable placeholder="请输入" />
      </el-form-item>
      <el-divider content-position="left">此项目授信总额度</el-divider>
      <el-form-item label="申请授信金额（元）:">
        <el-input-number v-model="formData.applyPrice" :precision="2" clearable />
      </el-form-item>
      <el-form-item label="授信经办人:">
        <div>{{ formData.sys_user.nickName }}</div>
      </el-form-item>
      <el-form-item label="授信时间:">
        <div>{{ formData.AgreeTime|formatDate }}</div>
      </el-form-item>
      <el-form-item label="分期情况:">
        <el-button type="primary" style="margin-bottom: 12px;" @click="addRefund">新增还款项</el-button>
        <el-table
          :data="formData.user_project_refund"
          stripe
          border
          row-key="period"
          style="width: 100%"
        >
          <el-table-column
            prop="period"
            label="期数"
            width="50"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.period }}
            </template>
          </el-table-column>
          <el-table-column
            prop="expectDate"
            label="应还日期"
            width="160"
            align="center"
          >
            <template slot-scope="scope">
              <el-date-picker
                v-if="scope.row.edit"
                v-model="scope.row.expectDate"
                type="date"
                placeholder="选择日期"
              />

              <span v-else> {{ formatDate(scope.row.expectDate) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="expectPrice"
            label="应还金额（元）"
            width="190"
            align="center"
          >
            <template slot-scope="scope">
              <el-input-number v-if="scope.row.edit" v-model="scope.row.expectPrice" :precision="2" clearable />

              <span v-else> {{ scope.row.expectPrice }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="payDate"
            label="实际还款日期"
            width="160"
            align="center"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.payDate.Valid == true"> {{ formatDate(scope.row.payDate.Time) }}</span>

            </template>
          </el-table-column>
          <el-table-column
            prop="payPrice"
            label="实际还款金额"
            width="190"
            align="center"
          />

          <el-table-column
            prop="payPic"
            label="上传图片"
            width="100"
            align="center"
          >
            <template slot-scope="scope">
              <upload v-model="scope.row.payPic" />
            </template>
          </el-table-column>

          <el-table-column
            label="操作"
            align="center"
          >
            <template slot-scope="scope">
              <el-button v-if="scope.row.edit" type="primary" style="margin-bottom: 12px;" @click="saveRefund">保存</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>

      <el-form-item label="施工企业授权委托书:">
        <Upload v-model="formData.authClientBook" />
      </el-form-item>

      <el-form-item label="中标通知书:">
        <Upload v-model="formData.bidFile" />
      </el-form-item>

      <el-form-item label="中标合同:">
        <Upload v-model="formData.bidOntract" />
      </el-form-item>

      <el-form-item label="项目经理，技术负责人和施工负责人签字样式确认及承诺书:">
        <Upload v-model="formData.commitment" />
      </el-form-item>

      <el-form-item label="施工许可证:">
        <Upload v-model="formData.conCer" />
      </el-form-item>

      <el-form-item label="信用报告:">
        <Upload v-model="formData.creditReport" />
      </el-form-item>

      <el-form-item label="控股股东或实控连带担保承诺函:">
        <Upload v-model="formData.holderCommitLetter" />
      </el-form-item>



      <el-form-item label="项目唯一指定结算账户确认书及承诺书:">
        <Upload v-model="formData.payCommitLetter" />
      </el-form-item>

      <el-form-item label="规划许可证:">
        <Upload v-model="formData.planCer" />
      </el-form-item>

      <el-form-item label="安全生成许可证:">
        <Upload v-model="formData.saveCer" />
      </el-form-item>

      <el-form-item label="投标文件:">
        <Upload v-model="formData.tenderFile" />
      </el-form-item>
      <el-form-item label="律师意见:">
        <el-switch active-color="#13ce66" inactive-color="#ff4949" active-text="同意" inactive-text="不同意" v-model="formData.attAgree" clearable ></el-switch>
      </el-form-item>
      <el-form-item label="律师备注:">
        <el-input v-model="formData.attAdvice" clearable placeholder="请输入" ></el-input>
      </el-form-item>
      <el-form-item label="审核状态：">
      <el-select   v-model="formData.nowStatus" placeholder="请选择">
        <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
        />

      </el-select></el-form-item>
<!--      <el-form-item label="会员ID:"><el-input v-model.number="formData.userId" clearable placeholder="请输入" />-->
<!--      </el-form-item>-->
      <el-form-item>
        <el-button type="primary" @click="save">保存</el-button>
        <el-button type="primary" @click="back">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Upload from '@/components/upload/image'
import { formatTimeToStr } from '@/utils/date'
import {
  createUserProjectRefund
} from '@/api/userProjectRefund'
import {
  createUserProject,
  updateUserProject,
  findUserProject
} from '@/api/userProject' //  此处请自行替换地址
import infoList from '@/mixins/infoList'
import dayjs from 'dayjs'
export default {
  name: 'UserProject',
  components: {
    Upload
  },
  filters: {
    formatDate: function(time) {
      if (time != null && time != '') {
        var date = new Date(time)
        return formatTimeToStr(date, 'yyyy-MM-dd hh:mm:ss')
      } else {
        return ''
      }
    },
    formatBoolean: function(bool) {
      if (bool != null) {
        return bool ? '是' : '否'
      } else {
        return ''
      }
    }
  },
  mixins: [infoList],
  data() {
    return {
      options: [{
        value: 10,
        label: '待审核'
      }, {
        value: 1,
        label: '待授信'
      }, {
        value: 2,
        label: '授信中'
      }, {
        value: 8,
        label: '律师审核中'
      },{
        value: 3,
        label: '还款中'
      },{
        value: 7,
        label: '已逾期'
      }, {
        value: 4,
        label: '已延迟'
      }, {
        value: 5,
        label: '冻结中'
      }, {
        value: 6,
        label: '已完成'
      }
      ],
      type: '', formData: {
        attAdvice:"",
        attAgree:false,
        allPrice: 0,
        applyPrice: 0,
        authClientBook: '',
        bankAddress: '',
        bankName: '',
        bankNumber: '',
        bidFile: '',
        bidOntract: '',
        commitment: '',
        conCer: '',
        conUnit: '',
        creditReport: '',
        holderCommitLetter: '',
        nowStatus: 0,
        outUnit: '',
        payCommitLetter: '',
        planCer: '',
        proAddress: '',
        proName: '',
        proTime: '',
        saveCer: '',
        tenderFile: '',
        userId: 0,
        sys_user: {},
        users: {
          user_level: {}
        },
        user_project_refund: [
        ]

      },
      project_refund :{
        payDate: {Time: "0001-01-01T00:00:00Z", Valid: false}
      }
    }
  },
  async created() {
    // 建议通过url传参获取目标数据ID 调用 find方法进行查询数据操作 从而决定本页面是create还是update 以下为id作为url参数示例
    if (this.$route.query.id) {
      const res = await findUserProject({ ID: this.$route.query.id })
      if (res.code == 0) {
        this.formData = res.data.reuserProject
        this.formData.proTime = this.formData.proTime.substring(0,10)

        this.type = 'update'
      }
    } else {
      this.type = 'create'
    }
  },
  methods: {
    formatDate(value) {
      if (!value || typeof value === 'object') {
        return ''
      }
      return dayjs(value).format('YYYY-MM-DD')
    },
    addRefund() {
      const user_project_refund = this.formData.user_project_refund
      const flag = user_project_refund.some(item => item.edit)
      console.log(user_project_refund)
      if (flag) {
        this.$message({
          message: '请先完成上一条还款项',
          type: 'warning'
        })
        return
      }
      user_project_refund.push({
        period: user_project_refund.length + 1,
        payDate:{
          Time:'0001-01-01T00:00:00Z',
          Valid:false
        },
        edit: true
      })
    },
    async saveRefund() {
      const user_project_refund = this.formData.user_project_refund
      const item = user_project_refund.filter(item => item.edit)[0]
      if (!item || !item.expectDate || !item.expectPrice) {
        this.$message({
          message: '请填写完整信息',
          type: 'warning'
        })

        return
      }

      const res = await createUserProjectRefund({
        ...item,
        projectId: this.formData.ID,
        userId: this.formData.userId,
        expectDate: item.expectDate,
        edit: undefined
      })

      if (res.code == 0) {
        if (this.$route.query.id) {
          const res = await findUserProject({ ID: this.$route.query.id })
          if (res.code == 0) {
            this.formData = res.data.reuserProject
            console.log(this.formData)
            this.type = 'update'
          }
        }
        item.edit = false
        this.$message({
          message: '保存成功',
          type: 'success'
        })
      }
    },
    async save() {
      let res
      switch (this.type) {
        case 'create':
          res = await createUserProject(this.formData)
          break
        case 'update':
          res = await updateUserProject(this.formData)
          break
        default:
          res = await createUserProject(this.formData)
          break
      }
      if (res.code == 0) {
        this.$message({
          type: 'success',
          message: '创建/更改成功'
        })
      }
    },
    back() {
      this.$router.go(-1)
    }
  }
}
</script>

<style>
.el-table .cell, .el-table--border td:first-child .cell, .el-table--border th:first-child .cell {
  padding-left: 4px;
  padding-right: 4px;
}
</style>
